<template>
    <div class="media-manager">
        <!-- 顶部操作栏 -->
        <div class="top-bar">
            <el-input v-model="searchQuery" placeholder="搜索图片/视频..." clearable style="width: 300px">
                <template #prefix>
                    <el-icon>
                        <search />
                    </el-icon>
                </template>
            </el-input>

            <el-select v-model="sortBy" placeholder="排序方式" style="width: 120px">
                <el-option label="按名称" value="name"></el-option>
                <el-option label="按时间" value="date"></el-option>
                <el-option label="按大小" value="size"></el-option>
            </el-select>

            <el-radio-group v-model="viewMode" size="small">
                <el-radio-button label="grid"><el-icon>
                        <grid />
                    </el-icon></el-radio-button>
                <el-radio-button label="list"><el-icon>
                        <menu />
                    </el-icon></el-radio-button>
            </el-radio-group>

            <el-select v-model="filterType" placeholder="筛选类型" style="width: 120px">
                <el-option label="全部" value="all"></el-option>
                <el-option label="图片" value="image"></el-option>
                <el-option label="视频" value="video"></el-option>
            </el-select>
        </div>

        <!-- 分类标签 -->
        <div class="category-tabs">
            <el-tabs v-model="activeCategory" type="card">
                <el-tab-pane label="最近" name="recent">
                    <template #label>
                        <span><el-icon>
                                <clock />
                            </el-icon> 最近</span>
                    </template>
                </el-tab-pane>
                <el-tab-pane label="图片" name="image">
                    <template #label>
                        <span><el-icon>
                                <picture />
                            </el-icon> 图片</span>
                    </template>
                </el-tab-pane>
                <el-tab-pane label="视频" name="video">
                    <template #label>
                        <span><el-icon><video-play /></el-icon> 视频</span>
                    </template>
                </el-tab-pane>
                <el-tab-pane label="收藏" name="favorite">
                    <template #label>
                        <span><el-icon>
                                <star />
                            </el-icon> 收藏</span>
                    </template>
                </el-tab-pane>
            </el-tabs>
        </div>

        <!-- 网格视图 -->
        <div v-if="viewMode === 'grid'" class="grid-view">
            <el-checkbox-group v-model="selectedFiles">
                <div class="grid-container">
                    <div v-for="file in filteredFiles" :key="file.id" class="grid-item" @dblclick="handlePreview(file)">
                        <el-checkbox :label="file.id" class="item-checkbox" />

                        <div class="thumbnail-container">
                            <img v-if="file.type === 'image'" :src="file.thumbnail" class="thumbnail"
                                :class="{ 'selected': selectedFiles.includes(file.id) }" />
                            <div v-else class="video-thumbnail" :class="{ 'selected': selectedFiles.includes(file.id) }">
                                <el-icon><video-play /></el-icon>
                                <span class="duration">{{ file.duration }}</span>
                            </div>

                            <div class="file-meta">
                                <div class="file-name">{{ file.name }}</div>
                                <div class="file-date">{{ formatDate(file.date) }}</div>
                            </div>

                            <div class="file-actions">
                                <el-icon v-if="file.favorite" color="#F7BA2A"><star-filled /></el-icon>
                                <el-icon v-else @click.stop="toggleFavorite(file)">
                                    <star />
                                </el-icon>
                            </div>
                        </div>
                    </div>
                </div>
            </el-checkbox-group>
        </div>

        <!-- 列表视图 -->
        <div v-else class="list-view">
            <el-table :data="filteredFiles" style="width: 100%" @row-dblclick="handlePreview">
                <el-table-column type="selection" width="55" />
                <el-table-column label="文件名" width="300">
                    <template #default="{ row }">
                        <div style="display: flex; align-items: center">
                            <el-icon v-if="row.type === 'image'" size="20">
                                <picture />
                            </el-icon>
                            <el-icon v-else size="20"><video-play /></el-icon>
                            <span style="margin-left: 10px">{{ row.name }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="修改日期" width="180" />
                <el-table-column prop="size" label="大小" width="120" />
                <el-table-column label="操作" width="120">
                    <template #default="{ row }">
                        <el-button size="small" @click.stop="handlePreview(row)">预览</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 底部状态栏 -->
        <div class="status-bar">
            <div class="status-info">
                已选 {{ selectedFiles.length }} 个项目 | 总计 {{ filteredFiles.length }} 个文件
            </div>
            <div class="storage-info">
                剩余空间: {{ formatStorage(remainingSpace) }} / {{ formatStorage(totalSpace) }}
            </div>
            <div class="action-buttons" v-if="selectedFiles.length > 0">
                <el-button size="small" type="primary" :icon="VideoPlay" @click="playSelected">播放</el-button>
                <el-button size="small" :icon="Edit" @click="editSelected">编辑</el-button>
                <el-button size="small" :icon="Download" @click="downloadSelected">下载</el-button>
                <el-button size="small" :icon="Share" @click="shareSelected">分享</el-button>
                <el-button size="small" :icon="Delete" @click="deleteSelected">删除</el-button>
            </div>
        </div>

        <!-- 预览对话框 -->
        <el-dialog v-model="previewVisible" :title="previewFile.name" width="70%">
            <div class="preview-content">
                <img v-if="previewFile.type === 'image'" :src="previewFile.url"
                    style="max-width: 100%; max-height: 70vh; display: block; margin: 0 auto" />
                <video v-else controls style="max-width: 100%; max-height: 70vh; display: block; margin: 0 auto">
                    <source :src="previewFile.url" :type="'video/' + previewFile.format">
                </video>
            </div>
            <template #footer>
                <el-button @click="previewVisible = false">关闭</el-button>
                <el-button type="primary" @click="handleEdit(previewFile)">编辑</el-button>
            </template>
        </el-dialog>
    </div>
</template>
  
<script setup>
import { ref, computed } from 'vue'
import {
    Search,
    Grid,
    Menu,
    Picture,
    VideoPlay,
    Star,
    StarFilled,
    Clock,
    Edit,
    Download,
    Share,
    Delete
} from '@element-plus/icons-vue'

// 模拟数据
const files = ref([
    {
        id: 1,
        name: 'beach.jpg',
        type: 'image',
        url: 'http://localhost:5000/file/3de3ce4f2efd422c9549031474af2553_3.jpg',
        thumbnail: 'http://localhost:5000/file/3de3ce4f2efd422c9549031474af2553_3.jpg',
        date: '2023-08-15',
        size: '2.4MB',
        favorite: true,
        rating: 4
    },
    {
        id: 2,
        name: 'party.mp4',
        type: 'video',
        url: 'https://example.com/videos/party.mp4',
        thumbnail: 'http://localhost:5000/file/3de3ce4f2efd422c9549031474af2553_3.jpg',
        date: '2023-09-01',
        size: '156MB',
        duration: '12:34',
        favorite: false,
        rating: 3
    },
    // 更多模拟数据...
])

// 状态管理
const searchQuery = ref('')
const sortBy = ref('date')
const viewMode = ref('grid')
const filterType = ref('all')
const activeCategory = ref('recent')
const selectedFiles = ref([])
const previewVisible = ref(false)
const previewFile = ref({})

// 计算属性
const filteredFiles = computed(() => {
    let result = [...files.value]

    // 搜索过滤
    if (searchQuery.value) {
        result = result.filter(file =>
            file.name.toLowerCase().includes(searchQuery.value.toLowerCase())
        )
    }

    // 类型过滤
    if (filterType.value !== 'all') {
        result = result.filter(file => file.type === filterType.value)
    }

    // 分类过滤
    if (activeCategory.value === 'favorite') {
        result = result.filter(file => file.favorite)
    } else if (activeCategory.value !== 'recent') {
        result = result.filter(file => file.type === activeCategory.value)
    }

    // 排序
    if (sortBy.value === 'name') {
        result.sort((a, b) => a.name.localeCompare(b.name))
    } else if (sortBy.value === 'date') {
        result.sort((a, b) => new Date(b.date) - new Date(a.date))
    } else if (sortBy.value === 'size') {
        result.sort((a, b) => {
            const sizeA = parseFloat(a.size)
            const sizeB = parseFloat(b.size)
            return sizeB - sizeA
        })
    }

    return result
})

// 存储空间信息
const totalSpace = ref(256 * 1024) // 256GB in MB
const usedSpace = ref(128 * 1024) // 128GB in MB
const remainingSpace = computed(() => totalSpace.value - usedSpace.value)

// 方法
const formatDate = (dateString) => {
    const options = { year: 'numeric', month: 'short', day: 'numeric' }
    return new Date(dateString).toLocaleDateString(undefined, options)
}

const formatStorage = (mb) => {
    if (mb >= 1024) {
        return `${(mb / 1024).toFixed(1)}GB`
    }
    return `${mb}MB`
}

const handlePreview = (file) => {
    previewFile.value = file
    previewVisible.value = true
}

const toggleFavorite = (file) => {
    file.favorite = !file.favorite
}

const playSelected = () => {
    if (selectedFiles.value.length === 1) {
        const file = files.value.find(f => f.id === selectedFiles.value[0])
        handlePreview(file)
    } else {
        // 处理批量播放逻辑
        ElMessage.info('批量播放功能')
    }
}

const editSelected = () => {
    ElMessage.info('编辑功能')
}

const downloadSelected = () => {
    ElMessage.info('下载功能')
}

const shareSelected = () => {
    ElMessage.info('分享功能')
}

const deleteSelected = () => {
    ElMessageBox.confirm('确定要删除选中的文件吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        files.value = files.value.filter(file => !selectedFiles.value.includes(file.id))
        selectedFiles.value = []
        ElMessage.success('删除成功')
    }).catch(() => {
        // 取消操作
    })
}
</script>
  
<style scoped>
.media-manager {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 20px;
    background-color: #f5f7fa;
}

.top-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.category-tabs {
    margin-bottom: 20px;
}

.grid-view {
    flex: 1;
    overflow-y: auto;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    padding: 10px;
}

.grid-item {
    position: relative;
    cursor: pointer;
    transition: all 0.3s;
}

.grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.item-checkbox {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 1;
}

.thumbnail-container {
    position: relative;
    height: 180px;
    border-radius: 4px;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #ebeef5;
}

.thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumbnail.selected,
.video-thumbnail.selected {
    border: 2px solid #409eff;
}

.video-thumbnail {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f2f5;
    color: #606266;
    font-size: 40px;
    position: relative;
}

.duration {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 12px;
}

.file-meta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: white;
    padding: 10px;
}

.file-name {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-date {
    font-size: 12px;
    opacity: 0.8;
}

.file-actions {
    position: absolute;
    top: 5px;
    right: 5px;
    color: white;
    font-size: 18px;
}

.list-view {
    flex: 1;
    overflow-y: auto;
}

.status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    margin-top: 20px;
    border-top: 1px solid #ebeef5;
}

.status-info,
.storage-info {
    font-size: 14px;
    color: #909399;
}

.action-buttons {
    display: flex;
    gap: 10px;
}
</style>